<html>
<head>
<link href="../style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p class="heading"> Tiles Module (last update 13/04/04) by BRENT SILBY</p>
<p class="subheading">
Description:
</p>
<p> This module is responsible for creating and manipulating tiles. Tiles are 
  used to construct backgrounds or platforms. Very similar to tiles, but the are 
  not able to check for collisions etc.</p>
<p> Like the sprite module, the tile module is optimised to use <em>image clipping</em>. 
  This means that all the tiles are in the same image. For gamelib, "frames" are 
  in the horizontal axis, and the vertical axis contains different tiles for other 
  stages. For example, all the tiles needed for stage 1 are contained in the first 
  horizontal strip. Then stage 2 tiles are in the next horizontal strip. This 
  is exactly the same as how sprite frames and animations are stored (see the 
  <a href="spritedoc.html">sprite module</a>).</p>
<p class="subheading"> To use: </p>
<p>The code can be linked in to your script by adding this line to the &lt;HEAD&gt; 
  section of your document: </p>
<p class="jcode"> &lt;script language="Javascript" src="gamelib_tiles.js"&gt;&lt;/script&gt; 
</p>
<p>A new tile is created via the following technique: </p>
<p class="jcode"> myTile=new Tl_Tile(); </p>

<p class="subheading"> List of methods for tiles</p>

<p> <br>
  <a href="#destroy">destroy</a><br>
  <a href="#moveTo">moveTo</a><br>
  <a href="#setStage">setStage</a><br>
  <a href="#setFrame">setFrame</a><br>
<a href="#setImage">setImage</a><br>
  <a href="#setOpacity">setOpacity</a><br>
  <a href="#setXlimits">setXlimits</a><br>
<a href="#setYlimits">setYlimits</a><br>
  <a href="#setZ">setZ</a><br>
<a href="#swapImage">swapImage</a><br>
<a href="#switchOn">switchOn</a><br>
  <a href="#switchOff">switchOff</a><br>
</p>

<p class="subheading"> List of properties for tiles</p>

<p> <a href="#stage">stage</a><br>
  <a href="#frame">frame</a><br>
  <a href="#height">height</a><br>
  <a href="#image">image</a><br>
  <a href="#on">on</a><br>
  <a href="#opacity">opacity</a><br>
  <a href="#width">width</a><br>
  <a href="#value">value</a><br>
  <a href="#x">x</a><br>
  <a href="#xmin">xmin</a><br>
  <a href="#xmax">xmax</a><br>
  <a href="#y">y</a><br>
  <a href="#ymin">ymin</a><br>
  <a href="#ymax">ymax</a><br>
  <a href="#z">z</a><br>
  <br>
</p>

<p class="subheading"> List of Global properties for tile library </p>

<p> <a href="#SPlinuxcompatible">Tl_linuxcompatible</a><br>
  <a href="#SPxoffset">Tl_xoffset</a><br>
  <a href="#SPyoffset">Tl_yoffset</a><br>
  <a href="#SPtotaltiles">Tl_totaltiles</a><br>
</p>


<p class="subheading">
Descriptions of methods
</p>

<table>
  <tr> 
    <th>Method</th>
    <th NOWRAP>Parameters</th>
    <th>Description</th>
  </tr>
  <tr> <a name="destroy"></a> 
    <td>destroy</td>
    <td>(none)</td>
    <td> This will "destroy" the tile object. After calling this method, the tile 
      will no longer respond to any methods. In actuality, the tile object still 
      exists, and is reused the next time a new tile is generated. The reason 
      the destroy method does not actually destroy the tile (IE, remove all the 
      properties, methods and DOM objects from the document) is to work around 
      the memory leak in IE6 (and possibly IE5), whereby the browser never actually 
      frees up any memory allocated when a DOM object is generated, when that 
      object is destroyed (unless the browser is minimized and maximized again 
      for some bizarre reason!) </td>
  </tr>
  <tr> <a name="moveTo"></a> 
    <td>moveTo</td>
    <td>Numeric, Numeric</td>
    <td> This moves tile to position on screen. * Note: this is relative to the 
      global offsets, unless the tile is static, and tile will only appear if 
      it's property "on" is true or it's static</td>
  </tr>
  <tr> <a name="setXlimits"></a> 
    <td>setXlimits</td>
    <td>Numeric, Numeric</td>
    <td> This limits the tile x movement. tile cannot move left further than the 
      first argument, or right further than second argument minus its width. If 
      property "<a href="#bounces">bounces</a>" is true then tile will bounce 
      when it hits its limit </td>
  </tr>
  <tr> <a name="setYlimits"></a> 
    <td>setYlimits</td>
    <td>Numeric, Numeric</td>
    <td> This limits the tile y movement. tile cannot move up further than the 
      first argument, or down further than second argument minus its height. If 
      property "<a href="#bounces">bounces</a>" is true then tile will bounce 
      when it hits its limit</td>
  </tr>
  <tr> <a name="setImage"></a> 
    <td>setImage</td>
    <td>String, Numeric, Numeric, Numeric, Numeric</td>
    <td> 
      <p> * Note: DO NOT use this method for normal image .src changes if the 
        new image will have the same dimensions, instead use the <a href="#swapImage">swapImage()</a> 
        method, which is MUCH faster for this! </p>
      <p> sets the tile image. tile images can be in "canvas animation" format, 
        this is a method of animating tiles that radically decreases download 
        times, and incurs almost no CPU overhead. The image will consist of all 
        the frames of animation for the tile. frames (see <a href="#setFrame">setFrame()</a> 
        below) are in x axis, and animations (set <a href="#setAnimation">setAnimation()</a>, 
        <a href="#setAnimation">setAnimationSpeed()</a>) are in y axis for each 
        frame. </p>
      <p> The arguments to this method are passed in the following order:<br>
        img = the image src (eg "mypicture.gif") x = width of the frames (frames 
        are the different shapes for the tile) y = height of the frames x2 = number 
        of frames in image y2 = number of animations per frame </p>
      <p> "frames" are in the X axis of a canvas image and "animations" are in 
        the Y axis. (See example of tile animation for clarification on this) 
      </p>
    </td>
  </tr>
  <tr> <a name="swapImage"></a> 
    <td>swapImage</td>
    <td>String</td>
    <td> Swaps the tile's image to a new passed as the argument. You must use 
      <a href="#setImage">setImage()</a> to set the tile's initial image. This 
      method will not resize the image currently in use, and so should only be 
      used to swap between images of the same size unless you don't mind the scaling. 
      On the other hand though, it's very fast! </td>
  </tr>
  <tr> <a name="setFrame"></a> 
    <td>setFrame</td>
    <td>Numeric</td>
    <td>This sets the tile's frame. Each frame can have a number of animations. 
      Using this resets the animation position for a tile to the first animation 
      for the frame (animation position 0). You must set a frame for a tile before 
      it will be displayed at all. If a tile only has one frame, and no animation, 
      use <a href="#setFrame">setFrame(0)</a> </td>
  </tr>
  <tr> <a name="setStage"></a> 
    <td>setStage</td>
    <td>Numeric</td>
    <td>This sets the tile's stage. This method is useful because it enables you 
      to choose a frame in the vertical axis. Suppose, for example, you are generating 
      platforms from tiles. You could store all the platforms tiles for each level 
      in the horizontal axis of the image. The vertical axis could be utilized 
      to change the tiles for different stages. So, for stage 1 in a game, you 
      could setStage(0), and then use setFrame to select tiles along the horizontal 
      axis. Stage 2 tiles could be accessed be setStage(1).</td>
  </tr>
  <tr> <a name="setZ"></a> 
    <td>setZ</td>
    <td>Numeric</td>
    <td> This sets the tile z-index. tiles with higher values move over those 
      with lower ones </td>
  </tr>
  <tr> <a name="switchOn"></a> 
    <td>switchOn</td>
    <td>(none)</td>
    <td> This switches the tile on. When a tile is created, it is off by default, 
      and so not visible </td>
  </tr>
  <tr> <a name="switchOff"></a> 
    <td>switchOff</td>
    <td>(none)</td>
    <td>This switches the tile off (default)</td>
  </tr>
  <tr> <a name="setOpacity"></a> 
    <td>setOpacity</td>
    <td>Numeric</td>
    <td>Sets the opacity of the tile. Range is from 0 to 100, with 0 being invisible. 
      It's probably not a good idea to use this too much in a game, as it affects 
      performance when there are a lot of semi-transparent objects flying around 
      (looks nice though!) This function has no effect with Netscape 4 (browser 
      does not support transparency.) </td>
  </tr>
</table>
<p class="subheading"> Descriptions of properties </p>
<table>
  <tr> 
    <th>Property</th>
    <th NOWRAP>Data Type</th>
    <th NOWRAP>Read/Write</th>
    <th>Description</th>
  </tr>
  <tr> <a name="on"></a> 
    <td>on</td>
    <td>Boolean</td>
    <td>R</td>
    <td> Use this to determine whether the tile is on/off. When off, it's not 
      on screen. </td>
  </tr>
  <tr> <a name="x"></a> 
    <td>x</td>
    <td>Numeric</td>
    <td>R</td>
    <td>tile's X position (see also Tl_xoffset)</td>
  </tr>
  <tr> <a name="y"></a> 
    <td>y</td>
    <td>Numeric</td>
    <td>R</td>
    <td>tile's Y position (see also Tl_yoffset)</td>
  </tr>
  <tr> <a name="z"></a> 
    <td>z</td>
    <td>Numeric</td>
    <td>R</td>
    <td> tile's z position. tiles with higher value will pass over tiles with 
      lower, also if a tile collides with more than one other during a loop, the 
      tile with the highest z index will be reported in the <a href="#hit">hit</a> 
      property. </td>
  <tr> <a name="xmin"></a> 
    <td>xmin</td>
    <td>Numeric</td>
    <td>R</td>
    <td> The minumum allowed x position for tile. tile will either stop or bounce 
      (see <a href="#bounces">bounces</a>) if it hits this limit. </td>
  <tr> <a name="ymin"></a> 
    <td>ymin</td>
    <td>Numeric</td>
    <td>R</td>
    <td> The minimum allowed y position for tile. tile will either stop or bounce 
      (see <a href="#bounces">bounces</a>) if it hits this limit. </td>
  </tr>
  <tr> <a name="xmax"></a> 
    <td>xmax</td>
    <td>Numeric</td>
    <td>R</td>
    <td> The maximum allowed x position for tile. tile will either stop or bounce 
      (see <a href="#bounces">bounces</a>) if it hits this limit. </td>
  </tr>
  <tr> <a name="ymax"></a> 
    <td>ymax</td>
    <td>Numeric</td>
    <td>R</td>
    <td> The maximum allowed y position for tile. tile will either stop or bounce 
      (see <a href="#bounces">bounces</a>) if it hits this limit. </td>
  </tr>
  <tr> <a name="width"></a> 
    <td>width</td>
    <td>Numeric</td>
    <td>R</td>
    <td>The width of tile</td>
  </tr>
  <tr> <a name="height"></a> 
    <td>height</td>
    <td>Numeric</td>
    <td>R</td>
    <td>The height of tile</td>
  </tr>
  <tr> <a name="frame"></a> 
    <td>frame</td>
    <td>Numeric</td>
    <td>R</td>
    <td> The current frame being used by an animated tile. Use <a href="#setFrame">setFrame()</a> 
      to change. </td>
  </tr>
  <tr> <a name="stage"></a> 
    <td>stage</td>
    <td>Numeric</td>
    <td>R</td>
    <td> The current vertical position for a frame. Use <a href="#setAnimation">setStage()</a> 
      to change. </td>
  </tr>
  <tr> <a name="image"></a> 
    <td>image</td>
    <td>String</td>
    <td>R</td>
    <td> The image canvas the tile is using. Its dimensions must be (width*frames) 
      wide and (height*animations) of the tile shape. </td>
  </tr>
  <tr> <a name="opacity"></a> 
    <td>opacity</td>
    <td>Numeric</td>
    <td>R</td>
    <td> The opacity level of tile (0-100) Using opacity will obviously impact 
      performance </td>
  </tr>
</table>

<p class="subheading">&nbsp;</p>

<p class="subheading">
Descriptions of Global properties for tile library
</p>

<table>
  <tr> 
    <th>Property</th>
    <th NOWRAP>Data Type</th>
    <th NOWRAP>Read/Write
    <th>Description</th>
  </tr>
  <tr> <a name="SPlinuxcompatible"></a> 
    <td>Tl_linuxcompatible</td>
    <td>Boolean</td>
    <td>R/W</td>
    <td>If this is set to true, linux compatibility mode is enabled for the tile 
      engine. Setting this to true will enable a workaround to a bug in the Mozilla 
      rendering engine (at the time of writing, the most recent version of Mozilla 
      is 1.1).</td>
  </tr>
  <tr> <a name="SPxoffset"></a> 
    <td>Tl_xoffset</td>
    <td>Numeric</td>
    <td>R/W</td>
    <td> (default=0) The origin of the tiles in the x axis. A tile x position 
      is relative to this unless the tile is <a href="#isstatic">static</a>. This 
      variable is also the x origin for the mouse object (see <a href="mousedoc.html">mouse 
      docs</a>) </td>
  </tr>
  <tr> <a name="SPyoffset"></a> 
    <td>Tl_yoffset</td>
    <td>Numeric</td>
    <td>R/W</td>
    <td> (default=0) the origin of the tiles in the y axis. A tile y position 
      is relative to this unless the tile is <a href="#isstatic">static</a>. This 
      variable is also the y origin for the mouse object (see <a href="mousedoc.html">mouse 
      docs</a>) </td>
  </tr>
  <tr> <a name="SPtotaltiles"></a> 
    <td>Tl_totaltiles</td>
    <td>Numeric</td>
    <td>R</td>
    <td>The number of tiles you've created</td>
  </tr>
</table>

</body>
</html>